<!DOCTYPE html>
<!-- supperss ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/yb_system_css/reset.css">
    <link rel="stylesheet" href="/yb_system_css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="/yb_system_css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="/yb_system_css/usercenter(1).css">

    <script src="/yb_system_js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="/yb_system_js/common.js"></script>
    <script src="/yb_system_js/jquery-3.5.1.min.js"></script>
    <script src="/yb_system_js/footfixed.js"></script>

    <script src="/yb_system_js/layer.js"></script>
    <link rel="stylesheet" href="/yb_system_css/layer.css" id="layuicss-layer">
    <title>个人中心</title>

</head>
<body>
<div class="content">

    <div class="content-top">
        <div class="content-top-info">
            <div class="content-top-left">
                <div class="left-logo">
                    <a th:href="@{/homePage}" class="logo-info" target="_self">
                        <img src="/yb_system_picture/logo.png" alt="有贝口腔网">
                    </a>
                </div>
                <ul class="right-list">
                    <li>
                        <a th:href="@{/consult}" target="_self">
                            <img src="/yb_system_picture/news-icon.png" alt="有贝口腔网"><span>资讯</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/askAnswer}" target="_self">
                            <img src="/yb_system_picture/qa-icon.png" alt="有贝口腔网"><span>问答</span>
                        </a>
                    </li>
                </ul>
            </div>
            <form th:action="@{/search}" method="get">
                <div class="content-top-right">
                    <div class="search-input">
                        <img class="search-icon" src="/yb_system_picture/icon_Search.png">
                        <input class="top-search" type="text" name="kw" placeholder="请输入资讯、问题搜索" value="">
                        <input class="search-sub" type="submit" value="搜索">
                    </div>
                    <div class="land-success">
                        <script type="text/javascript">
                            $(function () {
                                getUserReadCount();
                            })
                            function getUserReadCount() {
                                $.post(basePath + "user/center/getNoReadCount", function (data) {
                                    var msgCount = 0;
                                    var html = "<a href=\"/user/center/msgindex\">#type<span class=\"tips-num\">#count</span></a>";
                                    var setHtml = "";
                                    $("#myNoticeModul").html(setHtml);
                                    var list = data.data;
                                    var size = list.length;
                                    for (var i = 0; i < size; i++) {
                                        var type = list[i].type;
                                        var count = list[i].count;
                                        msgCount = msgCount + count;
                                        if (type == 10) {
                                            setHtml = html.replace("#type", "文章审核").replace("#count", count);
                                        } else if (type == 20) {
                                            setHtml = html.replace("#type", "提问审核").replace("#count", count);
                                        } else if (type == 21) {
                                            setHtml = html.replace("#type", "回答审核").replace("#count", count);
                                        }
                                        $("#myNoticeModul").append(setHtml);
                                    }
                                    if (msgCount == 0) {
                                        setHtml = html.replace("#type", "站内消息").replace("#count", msgCount);
                                        $("#myNoticeModul").append(setHtml);
                                    }
                                    $("#msgCount").html(msgCount);
                                    if (msgCount > 0) {
                                        $(".notice-tip").show();
                                    } else {
                                        $(".notice-tip").hide();
                                    }
                                });
                            }
                        </script>
                        <div class="message-notice">
                            <a th:href="@{/personalCenterMessages}">
                                <img src="/yb_system_picture/notice.png" alt="有贝口腔网">
                                <span class="notice-tip"id="msgCount"style="display:none">0</span>
                            </a>
                            <div class="notice-modul" id="myNoticeModul">
                                <a th:href="@{/messages}">站内消息<span class="tips-num">0</span></a>
                            </div>
                        </div>
                        <div class="land-success-img">
                            <a th:href="@{/personalCenterDynamicState}">
                                <img src="/yb_system_picture/user_Default.png">
                                <span class="land-success-name">1120402615</span>
                            </a>
                            <div class="img-posi-div">
                                <a th:href="@{/personalDetail}"><span>个人信息</span></a>
                                <a href="javascript:;" onclick="loginOut()"><span>退出登录</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <div class="content-main">
        <div class="main-info">
            <div class="main-user-left">
                <div class="user-left-card info-card">
                    <div class="user-img"><img th:src="@{${userMember.photoPath != null ? userMember.photoPath : '/yb_system_picture/user_Default.png'}}"></div>
                    <div class="usertop-for-phone">
                        <div class="user-name" th:text="${userMember.nickname}"></div>
                        <div class="user-style" th:text="${userMember.motto}">不要做懒人，给自己一个介绍吧</div>
                    </div>
                </div>
                <div class="user-left-card">
                    <div class="card-flex">
                        <div class="user-inter">
                            <a href="javascript:">
                                <span class="user-inter-num" th:text="${userMember.questionNum}"></span><span>提问</span>
                            </a>
                        </div>
                        <div class="line"></div>
                        <div class="user-inter">
                            <a href="javascript:">
                                <span class="user-inter-num" th:text="${userMember.answerNum}"></span>
                                <span>回答</span>
                            </a>
                        </div>
                        <div class="line"></div>
                        <div class="user-inter">
                            <a href="javascript:">
                                <span class="user-inter-num" th:text="${userMember.articleNum}"></span>
                                <span>文章</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-user-right">
                <input type="hidden" id="no" value="1286109182940024832">
                <div class="user-right-top">
                    <ul>
                        <li class="select-active" id="dy"><a href="javascript:;">动态</a></li>
                        <li id="q">
                            <a href="javascript:;" th:each="countData : ${mapData}" th:if="${countData.type==20}" th:text="${'提问 '+countData.count}">提问&nbsp;0</a>
                        </li>
                        <li id="an">
                            <a href="javascript:;" th:each="countData : ${mapData}" th:if="${countData.type==30}" th:text="${'回答 '+countData.count}">回答&nbsp;0</a>
                        </li>
                        <li id="art">
                            <a href="javascript:;" th:each="countData : ${mapData}" th:if="${countData.type==10}" th:text="${'文章 '+countData.count}">文章&nbsp;0</a>
                        </li>
                    </ul>
                </div>
                <div class="user-right-action">
                    <div id="myContent">
                    </div>
                    <div class="more-content">
                        <div class="load-more" style="display: none;">
                            <img src="/yb_system_picture/load-more.gif">
                            <span>加载中</span>
                        </div>
                        <div class="load-more-two load-more-fade" style="" onclick="moreList()">点击加载更多</div>
                        <div class="no-data" style="display:none">┭┮﹏┭┮,没有数据啦</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div th:replace="public::footer"></div>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?4245936cbef31e434e2b387b56dfd7d8";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</div>
<script>


    var current = 1;
    var tabId = "";
    var no = "";//用户编号
    //动态数据
    function dyList() {
        $(".load-more").show();
        $(".load-more-two").hide();
        $.post(basePath + "userCenterDynamicState/"+[[${userMember.id}]]+"?current=" + current, function (data) {
            $(".load-more").hide();
            //如果没有数据了就隐藏
            if (data.indexOf("没有匹配的个人动态数据")!=-1) {
                $(".load-more-two").hide();
                if (current == 1) {
                    $(".no-data").show();
                }
            } else {
                $(".load-more-two").show();
                $("#myContent").append(data);
            }
        });
    }

    //提问数据
    function qaList() {
        $(".load-more").show();
        $(".load-more-two").hide();
        $.post(basePath + "userCenterQuiz/"+[[${userMember.id}]]+"?current="  + current, function (data) {
            $(".load-more").hide();
            //如果没有数据了就隐藏
            if (data.indexOf("没有匹配的个人问题动态数据")!=-1) {
                $(".load-more-two").hide();
                if (current == 1) {
                    $(".no-data").show();
                }
            } else {
                $(".load-more-two").show();
                $("#myContent").append(data);
            }
        });
    }

    //回答数据列表
    function qaReplyList() {
        $(".load-more").show();
        $(".load-more-two").hide();
        $.post(basePath + "userCenterAnswer/"+[[${userMember.id}]]+"?current=" + current, function (data) {
            $(".load-more").hide();
            //如果没有数据了就隐藏
            if (data.indexOf("没有匹配的个人回答动态数据")!=-1) {
                $(".load-more-two").hide();
                if (current == 1) {
                    $(".no-data").show();
                }
            } else {
                $(".load-more-two").show();
                $("#myContent").append(data);
            }
        });
    }


    //文章数据列表
    function articleList() {
        $(".load-more").show();
        $(".load-more-two").hide();
        $.post(basePath + "userCenterArticle/"+[[${userMember.id}]]+"?current="  + current, function (data) {
            $(".load-more").hide();
            //如果没有数据了就隐藏
            if (data.indexOf("没有匹配的个人资讯动态数据")!=-1) {
                $(".load-more-two").hide();
                if (current == 1) {
                    $(".no-data").show();
                }
            } else {
                $(".load-more-two").show();
                $("#myContent").append(data);
            }
        });
    }


    function loadTabList() {
        if (tabId == 'dy') {//动态
            dyList();
        } else if (tabId == 'an') {// 回答
            qaReplyList();
        } else if (tabId == 'q') {// 提问
            qaList();
        } else if (tabId == 'art') {// 文章
            articleList();
        } else if (tabId == 'col') {// 收藏
            collectList();
        }
    }

    //加载更多
    function moreList() {
        current++;
        loadTabList();
    }

    function initList() {
        no = $("#no").val();
        tabId = 'dy';//动态
        dyList();
    }

    initList();//初始化
    // 点击tab标签
    $(".user-right-top li").click(function () {
        var id = $(this).attr("id");
        if (id == tabId) {
            return;
        }
        tabId = id;
        current = 1;
        $("#myContent").html("");
        $(".load-more-two").hide();
        $(".no-data").hide();
        loadTabList();
        $("li").removeClass("select-active");
        $(this).addClass("select-active");
    })


    $(".change-info-show").hide();
    $(".change-info-btn").click(function () {
        $(".change-info-top").hide();
        $(".change-info-show").show();
    })
    $(".write-box-input").change(function () {
        var inputle = $(this).val().length;
        $(".write-box-span i").text(inputle);
    })
    $(".write-box-textarea").change(function () {
        var textareale = $(this).val().length;
        $(".write-box-right i").text(textareale);
    })
    $(".write-box-input").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-input").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })
    $(".write-box-textarea").focus(function () {
        $(this).parent().css("border-color", "rgba(41,167,230,1)");
    })
    $(".write-box-textarea").blur(function () {
        $(this).parent().css("border-color", "#ddd");
    })


    $(".sure-btn").click(function () {
        var inputval = $(".write-box-input").val();
        var textareaval = $(".write-box-textarea").val();
        if (inputval == "" || textareaval == "") {
            alert("请输入信息");
            return false;
        }
        $(".h3-name").text(inputval);
        $(".p-style").text(textareaval);

        $(".change-info-show").hide();
        $(".change-info-top").show();
    })
    $(".close-btn").click(function () {
        $(".change-info-show").hide();
        $(".change-info-top").show();
    })

</script>


</body>
</html>